<template>
  <div class="content-body" :style="bodyStyle">
    <div
      v-if="
        setting.query !== undefined &&
          setting.query !== null &&
          setting.query.length > 0
      "
      class="query-custom"
      :style="bodyStyle"
    >
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        size="small"
        label-width="120px"
      >
        <el-form-item
          v-for="(item, index) in setting.query"
          :key="'query-' + index"
          :style="bodyStyle"
          :label="item.label"
          :prop="item.column"
          style="margin-top: 10px;margin-bottom: 10px;"
        >
          <el-input
            v-if="item.type === 1"
            v-model="form[item.column]"
            clearable
            :placeholder="item.label"
          />
          <el-date-picker
            v-if="item.type === 2"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
            type="date"
            :placeholder="item.label"
            clearable
          />
          <el-time-select
            v-if="item.type === 3"
            v-model="form[item.column]"
            :picker-options="{ start: '00:00', step: '00:15', end: '24:00' }"
            :placeholder="item.label"
            clearable
          />
          <el-date-picker
            v-if="item.type === 4"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
            type="daterange"
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-date-picker
            v-if="item.type === 5"
            v-model="form[item.column]"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            format="yyyy/MM/dd HH:mm:ss"
            value-format="yyyy/MM/dd HH:mm:ss"
            clearable
          />
        </el-form-item>
        <el-form-item style="margin-top: 10px;margin-bottom: 10px;">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="queryEntity"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="article-body">
      <el-empty
        v-if="dataList === null || dataList.length === 0"
        :image-size="100"
      />
      <div v-else>
        <div
          v-for="(obj, index) in dataList"
          :key="'obj-' + index"
          class="custom-ul-li"
          :style="active === index ? bodyStyle : ''"
          @click="openEntity(obj)"
        >
          <div class="custom-ul-li-title">{{ obj[column["title"]] }}</div>
          <div class="custom-ul-li-button">
            <div class="custom-li-button">{{ obj[column["left"]] }}</div>
            <div class="custom-li-time" :style="bodyStyle">
              {{ obj[column["time"]] }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="query-pager" :style="bodyStyle">
      <el-pagination
        :current-page="form.page"
        :page-size="form.size"
        :total="pagerSize"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
import { more, openEntity } from '@/mixins/template';
export default {
  name: 'PcMoreNewListTempV3', // 新闻类列表更多页面
  mixins: [more, openEntity],
  props: {
    temp: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      bodyStyle: {}
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        // 值发生变化时
        if (undefined !== newName && newName !== null) {
          this.setting = JSON.parse(newName.pzx);
          this.column = this.setting;
          this.form.cid = newName.id;
          this.initData(newName.id);
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    themes: {
      handler(val, oldVal) {
        this.$nextTick(() => {
          console.log(val);
          this.bodyStyle.borderRadius = val.bkdx;
          this.bodyStyle.background = val.columnGroundColor;
          this.bodyStyle.color = val.fontColor;
          this.bodyStyle = Object.assign({}, this.bodyStyle);
          this.bodyStyle = Object.assign({}, this.bodyStyle);
        });
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    this.$store
      .dispatch('GetThemes')
      .then(res => {
        return true;
      })
      .catch(error => {
        console.log(error);
      });
    // window.addEventListener(
    //   "storage",
    //   e => {
    //     //e只是一个传参
    //     //获取被修改的键值
    //     if (e.key == "themes") {
    //       //分别打印会发现内容一致
    //       //console.log(e.storageArea.themes);
    //       console.log(localStorage.themes);
    //       this.$store
    //         .dispatch("GetThemes")
    //         .then(res => {
    //           return true;
    //         })
    //         .catch(error => {
    //           console.log(error);
    //         });
    //       // this.$store.getters.theme = JSON.parse(localStorage.themes);
    //       //此行代码只在Chrome浏览器中有效
    //       console.log(e.storageArea === localStorage); //输出true
    //     }
    //   },
    //   false
    // );
  }
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}
.query-custom,
.query-pager {
  flex: 0 1 auto;
  min-height: 50px;
  border-bottom: 1px solid #dcdfe6;
}
.query-pager {
  height: 40px;
}
.article-body {
  flex: 1 1 auto;
  overflow: hidden;
  height: inherit;
}
.custom-ul-li {
  width: 100%;
  height: 60px;
  display: flex;
  flex-flow: column nowrap;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
}
.custom-ul-li-title {
  flex: 0 1 auto;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-ul-li-button {
  flex: 0 1 auto;
  height: 20px;
  display: flex;
  flex-flow: row nowrap;
  color: #909399;
}
.custom-li-button {
  flex: 1 1 auto;
  overflow: hidden;
  line-height: 20px;
  font-size: 12px;
}
.custom-li-time {
  flex: 0 1 auto;
  height: 20px;
  line-height: 20px;
  text-align: right;
  font-size: 12px;
}
[class*="el-col-"] {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
